<template>
    <div>
        <div class="item validateItem"></div>
        <div class="item" style="position: relative">
            <input type="number" class="form-ipt validatePhone" placeholder="4位短信验证码" v-model="mess" @keyup="save"
                   @input="save">
            <span class="validateFromPhone font1" v-if="isFlag" @click="checkPhone">
                <i class="mid-line"></i>
                获取验证码
                <div v-if="flag">
                    <captcha class="captcha" @getCaptcha="getCaptcha" v-show="phoneNo" ref="capt"></captcha>
                </div>
            </span>
            <span class="validateFromPhone validateWaiting" v-else><i class="mid-line"></i>(<span
                    id="countDown">90</span>s)重新获取</span>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import captcha from '../../component/login/captcha.vue'
    import {tl} from '../../mixin/tool.js'
    import {loginService} from '../../service/loginService'
    import {commonService} from '../../service/commonService'

    export default {
        props: ['type'],
        data() {
            return {
                mess: '', // 用户输入的短信验证码
                isFlag: 1, // 是否可以点击
                flag: true, // 是否可以点击
                isCha: 1, // 是否可以点击
                kaptchaValue: '',// 用户端输入验证码
                kaptchaKey: '', // 服务器端验证码
                challenge: '', // 服务器端验证码
                validate: '', // 服务器端验证码
                seccode: '', // 服务器端验证码
                baseCode: ''//验证码图片
            }
        },
        computed: {
            phoneNo() {
                if (tl.isPhoneNumber(this.$store.state.phoneNo)) {
                    return this.$store.state.phoneNo;
                } else {
                    return ''
                }
            }
        },
        components: {captcha: captcha},
        mounted() {
            let that = this
//      that.getImg ();
        },
        beforeDestroy() {
            let that = this;
            if (that.$store.state.loginStore.timer != 0) {
                clearInterval(that.$store.state.loginStore.timer);
            }
        },
        methods: {
            getImg() { //获取验证码
                var that = this
                loginService.getValidateImg().then(function (res) {
                    if (res.data.success) {
                        that.kaptchaKey = res.data.datas.kaptchaKey
                        that.baseCode = res.data.datas.imageString
                    }
                    else {

                    }
                })
            },
            getFromPhone() {
                let that = this;
                //1.验证手机号是否为空
                if (that.phoneNo && that.phoneNo.trim('').length > 0) {
                    //2.手机号格式是否正确
                    if (!tl.isPhoneNumber(that.phoneNo)) {
                        commonService.autoCloseModal(that, '请输入正确的手机号', 1);
                    }
                    else {
                        // 发送请求 type: 1.注册；2.手机（动态验证码）登陆并注册；3.手机充值密码
                        //验证是否通过
                        if (that.challenge != '' && that.validate != '') {
                            let params = {
                                phone: that.phoneNo,
                                type: that.$store.state.loginStore.smsType,
                                challenge: that.challenge,
                                validate: that.validate,
                                seccode: that.seccode
                            }
                            if(that.type) params.type= that.type;
                            // console.log(params);
                            //向服务器端请求发送验证码
                            loginService.getValidateMess(params).then(function (res) {
                                // console.log('mess', res);
                                if (res.data.success) {  // 返回正确
                                    // console.log(that.isFlag);
                                    //loginCommon.showFitIcon(obj, true);
                                    //                document.getElementById('yes').style.display = 'block';
                                    that.$store.state.loginStore.messValidate = that.validate
                                    let count = 0;
                                    that.isFlag = 0; //显示倒计时
                                    if (that.isFlag) {
                                        clearInterval(that.$store.state.loginStore.timer);
                                    } else {
                                        that.$store.state.loginStore.timer = setInterval(function () {
                                            count = parseInt(document.getElementById('countDown').innerHTML) - 1;
                                            if (count > 0) {
                                                document.getElementById('countDown').innerHTML = count;
                                            }
                                            else {
                                                clearInterval(that.$store.state.loginStore.timer);
                                                that.isFlag = 1;
                                            }
                                        }, 1000);
                                    }
                                }
                                else { //返回错误
                                    let errorMessage = '';
                                    errorMessage = res.data.message;
                                    commonService.autoCloseModal(that, errorMessage, 1);
                                    // that.$refs['capt'].getgaptchas();
                                }
                            });

                        } else {
                            commonService.autoCloseModal(that, '请重新验证获取验证码', 1);
                            that.isFlag = 1
                            that.isCha = 1
                        }
                    }
                }
                else {
                    commonService.autoCloseModal(that, '请输入正确的手机号', 1);
                }
            },
            checkPhone() {
                let that = this
                if (!that.phoneNo) {
                    commonService.autoCloseModal(that, '请输入正确的手机号', 1);
                    return false
                } else if (that.validate == '') {
                    return true
                } else {
                    return true
                }
         console.log(1);

            },
            save() {
                let that = this;
                that.$store.state.loginStore.messValidate = that.mess; // 短信验证码
            },
            getCaptcha(result) { //返回登录
                let that = this
                if (!result.statuscode) {
                    that.challenge = result.geetest_challenge
                    that.validate = result.geetest_validate
                    that.seccode = result.geetest_seccode
                    that.isCha = 0
                    if (that.phoneNo && that.phoneNo.trim('').length > 0) {
                        commonService.autoCloseModal(that, '发送成功，请耐心等待短信', 1);
                        that.getFromPhone()
                    } else {
                        commonService.autoCloseModal(that, '请输入正确的手机号', 1);
                    }

                } else if (result.statuscode * 1 === 1) {
                    commonService.autoCloseModal(that, '验证失败，请重新验证', 1);
                }
                that.flag = false
                setTimeout(function () {
                    that.flag = true
                },1)
            }

        }
    }
</script>
<style lang="less">
    .validateFromPhone {

        .captcha {
            position: absolute !important;
            left: 0;
            top: 0;
            opacity: 0;
        }

    }
</style>